<template>
  <div>
    部门 <el-select v-model="Departmentid" placeholder="请选择">
      <el-option v-for="item in options" :key="item.id" :label="item.departmenName" :value="item.id">
      </el-option>
    </el-select>
    职位 <el-select v-model="positionid" placeholder="请选择">
      <el-option v-for="item in options1" :key="item.id" :label="item.position" :value="item.id">
      </el-option>
    </el-select>
    审批状态 <el-select v-model="Examinationid" placeholder="请选择">
      <el-option v-for="item in options2" :key="item.id" :label="item.examination" :value="item.id">
      </el-option>
    </el-select>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="form.name" placeholder="审批人"></el-input>
      </el-form-item>
      <el-form-item label="入职日期" type="date">
        <el-input v-model="form.ks" placeholder="审批人" type="date"></el-input>
      </el-form-item>
    </el-form>

    <el-button type="primary" @click="show">查询</el-button>
    <el-button type="primary" @click="PDel">批量删除</el-button>
    <el-button type="primary" @click="tiao">查看</el-button>
    <el-button type="primary" @click="Addd">添加</el-button>
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>

      <el-table-column label="姓名" width="120">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column label="部门" width="120">
        <template slot-scope="scope">{{ scope.row.departmenName }}</template>
      </el-table-column>
      <el-table-column label="职位" width="120">
        <template slot-scope="scope">{{ scope.row.position }}</template>
      </el-table-column>
      <el-table-column label="入职时间" width="120">
        <template slot-scope="scope">{{ scope.row.thetime }}</template>
      </el-table-column>
      <el-table-column label="申请日期" width="120">
        <template slot-scope="scope">{{ scope.row.applicationdate }}</template>
      </el-table-column>
      <el-table-column label="审批状态" width="120">
        <template slot-scope="scope">{{ scope.row.examination }}</template>
      </el-table-column>
      <el-table-column label="创建时间" width="120">
        <template slot-scope="scope">{{ scope.row.creationtime }}</template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="Fan(scope.row.id)">编辑</el-button>
          <el-button size="mini" type="danger" @click="Del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageIndex"
      :page-sizes="[1, 2, 3, 4]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="totoCount">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [],
      multipleSelection: [],
      Departmentid: "",
      positionid: "",
      Examinationid: "",
      pageIndex: 1,
      pageSize: 2,
      totoCount: 0,
      form: {
        name: "",
        ks: '',
      },
      options: [],
      options1: [],
      options2: [],
    }
  },

  created () {
    this.show();
    this.bum();
    this.zhiwei();
    this.shepi();
  },
  methods: {

    //反填
    Fan (row) {
      document.cookie = row;
      localStorage.setItem("liz", row);
      this.$router.push("/ZhuanZhengUpdate")
    },

    //添加
    Addd () {
      this.$router.push("/ZhuanZhengAdd")
    },
    //跳转
    tiao () {
      this.$router.push("/ZhuanZhengUpdate")
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.show();
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
      this.pageIndex = val;
      this.show();
    },
    //删除
    Del (row) {
      if (confirm("确认删除吗？")) {
        this.$http({
          url: "https://localhost:44357/api/SSk/Dele?ids=" + row,
          method: "get",
        }).then((obj) => {
          alert("删除成功");
          this.show();
        })
      }
    },
    //删除
    PDel () {
      var ids = [];
      for (let i = 0; i < this.multipleSelection.length; i++) {
        ids.push(this.multipleSelection[i].id);
      }
      if (ids.length == 0) {
        alert("至少选择一个");
        return;
      }
      if (confirm("确认删除吗？")) {
        this.$http({
          url: "https://localhost:44357/api/SSk/Dele?ids=" + ids.toString(),
          method: "get",
        }).then((obj) => {
          alert("删除成功");
          this.show();
        })
      }
    },
    //显示
    show () {
      this.$http({
        url: "https://localhost:44357/api/SSk/EDShow",
        method: "get",
        params: {
          Departmentid: this.Departmentid,
          positionid: this.positionid,
          Examinationid: this.Examinationid,
          name: this.form.name,
          ks: this.form.ks,
          pageIndex: this.pageIndex,
          pageSize: this.pageSize
        }
      }).then((obj) => {


        this.tableData = obj.data.data.a;
        this.totoCount = obj.data.data.to;
      })
    },
    //部门
    bum () {
      this.$http({
        url: "https://localhost:44357/api/SSk/buma",
        method: "get",
      }).then((obj) => {
        this.options = obj.data;
      })
    },
    //职位
    zhiwei () {
      this.$http({
        url: "https://localhost:44357/api/SSk/zhiw",
        method: "get",
      }).then((obj) => {
        this.options1 = obj.data;
      })
    },
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    //审批状态
    shepi () {
      this.$http({
        url: "https://localhost:44357/api/SSk/sp",
        method: "get",
      }).then((obj) => {
        this.options2 = obj.data;
      })
    }
  }
}
</script>